import { h } from 'vue';
// import { getAllRoleList, setUserStatus } from '/@/api/demo/system';
import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tag, Tooltip, Image, Switch } from 'ant-design-vue';
import { getDataTypePreviewUrl, getDataTypePreviewUrlSiteCode } from '/@/utils/helper/paramsHelper';
import { updateGameHot } from '/@/api/sys/index';
import { useLocale } from '@/locales/useLocale';
import { currencyList } from '/@/settings/currencySetting';
import { useLocalList } from '/@/settings/localeSetting';
import { toTimezone } from '/@/utils/dateUtil';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '@/hooks/web/useMessage';
import { isHasAuth } from '/@/utils/authFunction';
import tableTooTip from '@/assets/images/tableImg/tableTooTip.png';

type CheckedType = boolean | string | number;

const localeList = useLocalList();
const { t } = useI18n();
// import { useMessage } from '/@/hooks/web/useMessage';
// import { formatToDate } from '/@/utils/dateUtil';

export const columns: BasicColumn[] = [
  // {
  //   title: '推荐',
  //   dataIndex: 'is_hot',
  //   customRender: ({ record }) => {
  //     if (!Reflect.has(record, 'pendingStatus')) {
  //       record.pendingStatus = false;
  //     }
  //     return h(Switch, {
  //       checked: record.is_hot === 1,
  //       //  checkedChildren: '推荐',
  //       //  unCheckedChildren: '不推荐',
  //       loading: record.pendingStatus,
  //       onChange: async (checked: CheckedType) => {
  //         record.pendingStatus = true;
  //         const newStatus = checked ? 1 : 2;
  //         const params = { platform_id: record.platform_id, id: record.id, is_hot: newStatus };
  //         const { createMessage } = useMessage();
  //         const { status, data } = await updateGameHot(params);
  //         if (status) {
  //           record.is_hot = newStatus;
  //           createMessage.success(data);
  //           record.pendingStatus = false;
  //         }
  //         console.log(data);
  //       },
  //     });
  //   },
  // },
  {
    title: t('table.system.system_game_name'),
    dataIndex: 'name',

    // customRender: ({ record }) => {
    //   return h(
    //     Tooltip,
    //     {
    //       title: record.name,
    //     },
    //     () =>
    //       h(
    //         'div',
    //         {
    //           style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' },
    //         },
    //         record.name,
    //       ),
    //   );
    // },
  },
  {
    title: t('table.system.system_game_icon'),
    dataIndex: 'img',
    width: 80,
    customRender: ({ record }) => {
      //console.log(record)
      // if (record.game_type === '8') {
      //   return h(Image, { src: getDataTypePreviewUrlSiteCode(record.img) });
      // } else {
      return h(Image, { src: getDataTypePreviewUrl(record.img) });
      // }
    },
  },
  // {
  //   title: '客户端',
  //   dataIndex: 'client_type',
  //   customRender: ({ record }) => {
  //     const client = record.client_type ? JSON.parse(record.client_type) : [];
  //     return client.map((item) => Client[item.id]).join(', ');
  //   },
  // },
  // {
  //   title: '支持语言',
  //   dataIndex: 'lang',
  //   customRender: ({ record }) => {
  //     const lang = record.lang ? JSON.parse(record.lang) : [];
  //     return lang.map((item) => item.id).join(', ');
  //   },
  // },
  // {
  //   title: '支持币种',
  //   dataIndex: 'currency',
  //   customRender: ({ record }) => {
  //     const currency = record.currency ? JSON.parse(record.currency) : [];
  //     return currency.map((item) => item.id).join(', ');
  //   },
  // },
  // {
  //   title: '热门',
  //   width: 70,
  //   dataIndex: 'is_hot',
  //   customRender: ({ record }) => {
  //     if (!Reflect.has(record, 'hotPendingStatus')) {
  //       record.hotPendingStatus = false;
  //     }
  //     return h(Switch, {
  //       checked: record.is_hot === 1,
  //       loading: record.hotPendingStatus,
  //       onChange(checked: boolean) {
  //         record.hotPendingStatus = true;
  //         const param = <any>{
  //           id: record.id,
  //           val: checked ? 1 : 2,
  //           type: 'hot',
  //         };
  //         updateBacthGame(param)
  //           .then(() => {
  //             record.is_hot = checked ? 1 : 2;
  //             eventBus.emit('reloadTable');
  //           })
  //           .catch(() => {
  //             record.hotPendingStatus = false;
  //           })
  //           .finally(() => {
  //             record.hotPendingStatus = false;
  //           });
  //       },
  //     });
  //   },
  // },
  // {
  //   title: '推荐',
  //   width: 70,
  //   dataIndex: 'is_new',
  //   customRender: ({ record }) => {
  //     if (!Reflect.has(record, 'recPendingStatus')) {
  //       record.recPendingStatus = false;
  //     }
  //     return h(Switch, {
  //       checked: record.is_new === 1,
  //       loading: record.recPendingStatus,
  //       onChange(checked: boolean) {
  //         record.recPendingStatus = true;
  //         const param = <any>{
  //           id: record.id,
  //           val: checked ? 1 : 2,
  //           type: 'rec',
  //         };
  //         updateBacthGame(param)
  //           .then(() => {
  //             record.is_new = checked ? 1 : 2;
  //             eventBus.emit('reloadTable');
  //           })
  //           .catch(() => {
  //             record.recPendingStatus = false;
  //           })
  //           .finally(() => {
  //             record.recPendingStatus = false;
  //           });
  //       },
  //     });
  //   },
  // },
  // {
  //   title: '收藏',
  //   width: 70,
  //   dataIndex: 'is_fav',
  //   customRender: ({ record }) => {
  //     if (!Reflect.has(record, 'favPendingStatus')) {
  //       record.favPendingStatus = false;
  //     }
  //     return h(Switch, {
  //       checked: record.is_fav === 1,
  //       loading: record.favPendingStatus,
  //       onChange(checked: boolean) {
  //         record.favPendingStatus = true;
  //         const param = <any>{
  //           id: record.id,
  //           val: checked ? 1 : 2,
  //           type: 'fav',
  //         };
  //         updateBacthGame(param)
  //           .then(() => {
  //             record.is_fav = checked ? 1 : 2;
  //             eventBus.emit('reloadTable');
  //           })
  //           .catch(() => {
  //             record.favPendingStatus = false;
  //           })
  //           .finally(() => {
  //             record.favPendingStatus = false;
  //           });
  //       },
  //     });
  //   },
  // },
  // {
  //   title: '状态',
  //   dataIndex: 'online',
  //   width: 100,
  //   customRender: ({ record }) => {
  //     const online = record.online;
  //     const color = online === 2 ? '#E91134' : '#1CD91C';
  //     const text = online === 2 ? '停用' : '正常';
  //     return h(Tag, { color: color }, () => text);
  //   },
  // },
  {
    title: t('table.system.system_game_show'),
    dataIndex: 'online',

    customRender: ({ record }) => {
      const online = record.online;
      const color = online == 2 ? '#E91134' : '#1CD91C';
      const text = online == 2 ? t('business.common_deactivate') : t('business.common_on_activate');
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: t('table.system.system_rabate_walter'),
    dataIndex: 'percent',
    helpMessage: `<div style="padding:12px 10px"><div style="font-size:12px"><span style="color: #facd91">返水占比：</span>在原本的返水基础上，再进行一次返水计算</div>
    <p style="font-size:12px">举例：</p><div style="margin-top:4px;border-radius:4px; overflow:hidden"><img style="width:509px" src="${tableTooTip}"/></div></div>`,
    titleHelpPlacement: 'right',

    customRender: ({ record }) => {
      const percent = record.percent ? `${Number(record.percent)}%` : '-';
      return h(
        'span',
        {
          style: { color: Number(record.percent) < 100 ? '#E91134' : '' },
        },
        percent,
      );
    },
  },
  {
    title: t('table.system.system_update_time'),
    dataIndex: 'updated_at',
    width: 180,
    customRender: ({ record }) => {
      return toTimezone(record.updated_at, 'YYYY-MM-DD HH:mm:ss');
    },
  },
  {
    title: t('table.member.member_oprate_people'),
    dataIndex: 'updated_name',
  },
];

export const searchFormSchema: FormSchema[] = [
  // {
  //   field: 'is_hot',
  //   component: 'Select',
  //   labelPrefixWidth: 45,
  //   labelPrefix: '推荐',
  //   defaultValue: 0,
  // 	//ifShow:()=> false,
  //   colProps: { xxl: 3, xl: 3, lg: 3, md: 3, sm: 7 },
  //   componentProps: {
  //     options: [
  //       {
  //         label: '全部',
  //         value: 0,
  //       },
  //       {
  //         label: '开启',
  //         value: 1,
  //       },
  //       {
  //         label: '关闭',
  //         value: 2,
  //       },
  //     ],
  //   },
  // },
  {
    field: 'online',
    labelPrefix: t('table.system.system_game_show'),
    labelPrefixWidth: 75,
    component: 'Select',
    defaultValue: 0,
    componentProps: {
      allowClear: false,
      options: [
        { label: t('business.common_all'), value: 0 },
        { label: t('business.common_normal'), value: 1 },
        { label: t('business.common_deactivate'), value: 2 },
      ],
    },
    // colProps: { xxl: 5, xl: 5, lg: 5, md: 5, sm: 6  },
    colProps: { style: { width: '160px' } },
  },
  {
    field: 'word',
    labelPrefix: t('table.report.report_game_name'),
    labelPrefixWidth: 75,
    component: 'Input',
    colProps: { xxl: 6, xl: 6, lg: 6, md: 6, sm: 7 },
  },
];

export const gameFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: t('table.report.report_game_name'),
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  // {
  //   field: 'img',
  //   label: '游戏图标',
  //   component: 'Input',
  //   slot: 'upload-img',
  // },
  {
    field: 'lang',
    label: t('table.system.system_supported_languages'),
    component: 'Select',
    componentProps: () => {
      const option = localeList.map((item) => {
        return { label: item.text, value: item.event };
      });
      return {
        mode: 'multiple',
        options: option,
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'currency',
    label: t('table.system.system_supported_currencies'),
    component: 'Select',
    componentProps: {
      mode: 'multiple',
      options: currencyList,
      getPopupContainer: () => document.body,
    },
  },
];
